<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js圆形线条倒数特效</title>

<style type="text/css">
	.circle{
		transform:rotate(-90deg);
		transform-origin: 50% 50%;
	}



</style>
</head>
<body>
	

<div id="app">
	<svg
		:width="size";
		:height="size">

		<circle
			fill="transparent"
			:stroke-width="stroke"
			stroke="#eee"
			:r="radius"
			:cx="circleoffset"
			:cy="circleoffset"></circle>

		<circle
			class="circle"
			fill="transparent"
			:stroke-width="stroke"
			stroke="#000"
			:r="radius"
			:cx="circleoffset"
			:cy="circleoffset"

			:stroke-dasharray="circumference"
			:stroke-dashoffset="progress"
			stroke-linecap="round"></circle>

	</svg>

</div>



	


<script src="./vue.js"></script>
<script type="text/javascript">
	
	var app = new Vue({
		el:"#app",

		data:{
			size:120,
			stroke:10,
			percentage:50,
		},

		computed:{
			radius(){//返回半径的数
				return (this.size/2)-(this.stroke/2)
			},
			circleoffset(){//返回圆形大小的一半
				return this.size/2
			},
			circumference(){//返回圆周的计算公式,半径*2*Π
				return this.radius*2*Math.PI
			},
			progress(){
				return this.circleoffset-this.circumference*this.percentage/100
			}
		}


	})







</script>

</body>
</html>